// 获取裁剪区域的 DOM 元素
let $image = $(".container img");
// 配置选项
// 指定预览区域
let options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域（预览的图片放到哪去）
    preview: ".preview",
}
// 创建剪裁区域
$image.cropper(options);

// 点击上传, 可以选择图片
//（点击button按钮时，触发点击了隐藏的文件选择框）
$('#btnChooseImage').click(function () {
    $('#file').click();
});

// 当文件域的内容改变的时候，更换图片
$('#file').change(function () {
    // 1. 找到选择的图片（文件对象）
    let fileObj = this.files[0]; // 我们选择的图片的文件对象

    // 当fileObj不存在 => 用户点击了取消，fileObj就是undefined，阻止后续代码运行，否则会报错
    if (!fileObj) {
        return;
    }

    // 2. 根据文件对象，生成一个临时的url，用于访问被选择的图片
    let url = URL.createObjectURL(fileObj);

    // 3. 更换剪裁区的图片的src属性
    // - 销毁原理的剪裁区
    // - 更换图片
    // - 重新创建剪裁区
    $image.cropper('destroy').attr('src', url).cropper(options);
});

//上传头像
//点击 上传头像 的时候，剪裁图片，转成base64格式，提交字符串到接口
$('#btnCreateAvatar').click(function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    // console.log(dataURL)

    // axios
    axios
        .post("/my/update/avatar","avatar=" + encodeURIComponent(dataURL))
        .then((res) => {
            // console.log(res);
             // 提示
            if (res.data.status !== 0) {
                // 失败
                return layer.msg("更新头像失败");
            }

            layer.msg("更新头像成功");
            // 页面中的头像发生变化（更新）
            window.parent.getUserInfo();
        });
});